<template>
  <div class="wscn-http404-container">
    <div style="padding-bottom:30px"> 当tree组件数据比较多的时候我们的处理方法</div>
    <div class="block">
      <el-tree
        :data="data"
        node-key="id"
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span style="padding-right:15px">{{ node.label }}</span>
          <span style="padding-right:15px" v-if="data.children && data.children.length>0">{{ 1 }}页 / {{10 }}页 </span>
          <span style="padding-right:30px" v-if="data.children && data.children.length>0"> 总数{{ 100 }} </span>
          <span v-if="data.children && data.children.length>0">
            <el-button type="text" size="mini" @click="() => append(data)"> 前一页 </el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">后一页</el-button>
          </span>
        </span>
      </el-tree>

    </div>
  </div>
</template>

<script>
let id = 1000;
export default {
  name: "Page404",
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        start:1,
        end:10,
        total:10,
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        start:1,
        total:10,
        end:10,
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        start:1,
        total:10,
        end:10,
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      }
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
    };
  },
  methods: {
    //这个分页的处理要后端配合
    //以及有多少数据和多少页等
    append(data) {
      console.log('data data')
      console.log(data)
      console.log('data data')
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      // data.children.push(newChild);
      data.children=[newChild] ;

    },

    remove(node, data) {
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      // children.splice(index, 1);

       const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      // data.children.push(newChild);
      data.children=[newChild] ;


    },


  }
};
</script>

<style lang="scss" scoped>
.wscn-http404-container {
  padding: 30px;
}
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
